<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title></title>


	<link rel="stylesheet" type="text/css" href="libs/fullpage/jquery.fullPage.css" />

	<script src="libs/jquery/dist/jquery.js"></script>

	<!-- This following line is needed only in case of using other easing effect rather than "linear", "swing" or "easeInQuart". You can also add the full jQuery UI instead of this file if you prefer -->
	<script src="libs/fullpage/vendors/jquery.easings.min.js"></script>


	<!-- This following line needed in the case of using the plugin option `scrollOverflow:true` -->
	<script type="text/javascript" src="libs/fullpage/vendors/jquery.slimscroll.min.js"></script>

	<script type="text/javascript" src="libs/fullpage/jquery.fullPage.js"></script>
	<style>
		.science-inner .st1 {
			background-position: 0 4px
		}
		.science-inner .st2 {
			background-position: 0 -59px
		}
		.science-inner .st3 {
			background-position: 0 -59px
		}
		.science-inner .st4 {
			font-size: 48px;
			background-position: 0 -104px
		}
	</style>
</head>
<body>
<div class="section">
	<div class="science-inner inner">
		<a class="itemshow stiteml st1" href="javascript:void(0)" rel="0,-350,0,7">网络机顶盒</a>
		<a class="itemshow stiteml st2" href="javascript:void(0)" rel="0,-350,0,37">干细胞人造肉</a>
		<a class="itemshow stiteml st3" href="javascript:void(0)" rel="0,-350,0,68">3D涂鸦笔</a>
		<a class="itemshow stiteml st4" href="javascript:void(0)" rel="0,-350,0,88">H7N9</a>
		<a class="stimg1" href="javascript:void(0)" rel="0,-350,0,153">
			<img width="181" height="166" src="images/h7n9.jpg">
		</a>
	</div>
</div>
<script>
	$(document).ready(function() {
		$.fn.fullpage({
			slidesColor: ['#0075D1', '#C2E5FF', '#FDF6E1', '#E9E9E9', '#F3F3F3', '#F9F3DC'],
			anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6'],
			menu: '#menu',
			afterRender: function(){
				$('.screen-main span').each(function(){
					var $rel = $(this).attr('rel');
					var $arr = $rel.split(',');
					$(this).animate({
						left: $arr[2] + 'px',
						top: $arr[3] + 'px'
					}, 500);
				});
				$('.inner a').each(function(){
					var $rel = $(this).attr('rel');
					var $arr = $rel.split(',');
					$(this).animate({
						left: $arr[0] + 'px',
						top: $arr[1] + 'px'
					}, 500);
				});
			},
			afterLoad: function(anchorLink, index){
				if(index == 1){
					$('.screen-main span').each(function(){
						var $rel = $(this).attr('rel');
						var $arr = $rel.split(',');
						$(this).animate({
							left: $arr[2] + 'px',
							top: $arr[3] + 'px'
						}, 500);
					});
				}
				if(index == 2 || index == 3 || index == 4 || index == 5){
					$('.inner').eq(index - 2).find('a').each(function(){
						var $rel = $(this).attr('rel');
						var $arr = $rel.split(',');
						$(this).animate({
							left: $arr[2] + 'px',
							top: $arr[3] + 'px'
						}, 500);
					});
				}
				if(index == 6){
					$('.zanzhu-con a').fadeIn(1000);
				}
			},

			onLeave: function(index, direction){
				if(index == 1){
					$('.screen-main span').each(function(){
						var $rel = $(this).attr('rel');
						var $arr = $rel.split(',');
						$(this).animate({
							left: $arr[0] + 'px',
							top: $arr[1] + 'px'
						}, 500);
					});
				}
				if(index == 2 || index == 3 || index == 4 || index == 5){
					$('.inner').eq(index - 2).find('a').each(function(){
						var $rel = $(this).attr('rel');
						var $arr = $rel.split(',');
						$(this).animate({
							left: $arr[0] + 'px',
							top: $arr[1] + 'px'
						}, 500);
					});
				}
				if(index == 6){
					$('.zanzhu-con a').fadeOut(1000);
				}
			}
		});
	});
</script>
</body>
</html>